<template>
  <div>
    <!-- 第二步 为 echarts 准备 Dom 区域 -->
    <div id="main1" style="height:600px;"></div>
   </div>
</template>

<script type="text/javascript">
  // 第一步 导入图表组件 echarts
  import * as echarts from 'echarts'
  export default {
       data(){
         return{
           dd:[],
           sj:[],
           jj:[]
         }
       },
      mounted() {
          // 第三步 初始化 echarts
          var myChart = echarts.init(document.getElementById('main1'))
          // 第四步 准备数据和配置项
          var option = {
                /* 表名*/
                title: {
                  text: '进价与售价对比',
                  subtext: 'Fake Data'
                },
                tooltip: {
                  trigger: 'axis'
                },
                /* 字段名*/
                legend: {
                  data: ['进价', '售价'],
                },
                toolbox: {
                  show: true,
                  feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                /* x轴*/
                xAxis: [
                  {
                    type: 'category',
                    // prettier-ignore
                    data: []
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: '进价',
                    type: 'bar',
                    data: [

                    ],
                    markPoint: {
                      data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                      ]
                    },
                    markLine: {
                      data: [{ type: 'average', name: 'Avg' }]
                    }
                  },
                  {
                    name: '售价',
                    type: 'bar',
                    data: [

                    ],
                    markPoint: {
                      data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                      ]
                    },
                    markLine: {
                      data: [{ type: 'average', name: 'Avg' }]
                    }
                  }
                ]
              }
          // 第五步 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
          this.getItemList();
      },
      // created() {
        //1.获取商品列表数据
        // this.getItemList()
      // },
      methods: {

        //实现商品信息分页查询
        async getItemList() {
            var myChart = echarts.init(document.getElementById('main1'))
          const {
            data: result,status:status
          } = await this.$http.get("/charts/showlist")
          console.log(result)
          console.log(result[1].title)
          // this.myChart.setOptions(this.option,true)
          for(var i=0 ;i<result.length;i++){
            this.dd[i]=result[i].title;
            this.sj[i]=(result[i].pricerow)/100;
            this.jj[i]=(result[i].price)/100;
          }
         myChart.setOption({
                     xAxis: [
                       {
                         type: 'category',
                         // prettier-ignore
                         data: this.dd
                       }
                     ],
                     series: [
                       {
                         name: '进价',
                         type: 'bar',
                         data: this.jj,
                         markPoint: {
                           data: [
                             { type: 'max', name: 'Max' },
                             { type: 'min', name: 'Min' }
                           ]
                         },
                         markLine: {
                           data: [{ type: 'average', name: 'Avg' }]
                         }
                       },
                       {
                         name: '售价',
                         type: 'bar',
                         data: this.sj,
                         markPoint: {
                           data: [
                             { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                             { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                           ]
                         },
                         markLine: {
                           data: [{ type: 'average', name: 'Avg' }]
                         }
                       }
                     ]
                     });
           console.log(this.dd)
          this.dataname = result.title
         }
       }

  }
</script>

<style>
</style>
